<template>
  <view class="forum-page">
    <!-- 添加帖子按钮 -->
    <button @click="addTieFn" class="addbtn">添加帖子</button>
    <!-- 分类导航 -->
    <view class="category-nav">
      <view
        v-for="(item, index) in classList"
        :key="item.id"
        :class="{ 'active': currentIndex === index }"
        @click="xuanzhong(index, item.id, item.name)"
      >
        {{ item.name }}
      </view>
    </view>
    <!-- 间隔区域 -->
    <view class="spacer"></view>
    <!-- 帖子列表 -->
    <view class="post-list">
      <view
        v-for="(item, index) in TieziList"
        :key="item.id"
        class="post-item"
        @click="goDetail(item.id, item.name)"
      >
        <view class="post-left">
          <image src="" mode=""></image>
        </view>
        <view class="post-right">
          <view class="post-title">帖子名称: {{ item.name }}</view>
          <view class="post-content">帖子内容: {{ item.content }}</view>
		  <view class="post-content top">发布时间{{dayjs(item.createdAt).format('YYYY-MM-DD HH:mm:ss')}}</view>
		  <view class="post-content top">观看量{{item.views}}</view>
		</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import {
  getBanKuai,
  getTiezi,
  newTie,
  remen
} from '../../api/luntan.js';
import {
  onLoad,
  onShow,
  onReachBottom
} from "@dcloudio/uni-app";
import dayjs from 'dayjs';
let classList = ref([]);
let currentIndex = ref(0);
let TieziList = ref([]);
let xuanzhongContent = ref('教育');
let sendTime=ref('')
let page=ref(1)
let per=ref(10)

// 获取帖子列表
async function getList(id) {
  let r2 = await getTiezi(id,'',page.value,per.value);
  console.log(r2.data.data);
  TieziList.value = r2.data.data;
}

// 获取热门列表
async function getHot() {
  let r4 = await remen();
  console.log(r4.data.data);
  TieziList.value = r4.data.data;
}

// 获取最新列表
async function getNew() {
  let r5 = await newTie();
  console.log(r5.data.data);
  TieziList.value = r5.data.data;
}

function xuanzhong(index, id, name) {
  console.log(id);
  xuanzhongContent.value = name;
  currentIndex.value = index;
  // 获取热门
  if (id === 14) {
    getHot();
  }
  // 获取最新
  else if (id === 13) {
    getNew();
  }
  // 获取其他分类数据
  else {
    getList(id);
  }
}
// 上拉触底
onReachBottom(()=>{
	per.value+=10
	getList()
})

function addTieFn() {
  console.log("啊啊啊啊");
  uni.navigateTo({
    url: "/pages/addTiezi/addTiezi"
  });
}

async function BankuaiList() {
  let r1 = await getBanKuai();
  console.log(r1.data.data);
  classList.value = r1.data.data;
}

onLoad((option) => {
  BankuaiList();
  getList(9);
});

onShow(() => {
  getList(9);
});

// 进入详情
function goDetail(id, name) {
  console.log(name);
  uni.navigateTo({
    url: `/pages/TieziDetail/TieziDetail?id=${id}&name=${name}`
  });
}
</script>

<style scoped>
/* 整体页面样式 */
.forum-page {
  padding: 20px;
  background-color: #f4f4f9;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.top{
	margin-top: 10px;
}
/* 添加帖子按钮样式 */
.addbtn {
  padding: 10px 20px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.addbtn:hover {
  background-color: #0056b3;
}

/* 分类导航样式 */
.category-nav {
  display: flex;
  margin-top: 20px;
  margin-bottom: 20px;
}

.category-nav view {
  flex: 1;
  margin-right: 10px;
  padding: 10px;
  background-color: #e0e0e0;
  text-align: center;
  line-height: 30px;
  font-size: 18px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.category-nav view:hover {
  background-color: #d0d0d0;
}

.category-nav .active {
  background-color: #007BFF;
  color: white;
}

/* 间隔区域样式 */
.spacer {
  margin-top: 20px;
  margin-bottom: 20px;
}

/* 帖子列表样式 */
.post-list {
  display: flex;
  flex-direction: column;
}

.post-item {
  display: flex;
  background-color: white;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  padding: 15px;
  transition: box-shadow 0.3s ease;
}

.post-item:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.post-left {
  flex: 2;
  margin-right: 15px;
}

.post-left image {
  width: 100%;
  height: 80px;
  object-fit: cover;
  border-radius: 5px;
}

.post-right {
  flex: 5;
}

.post-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.post-content {
  font-size: 14px;
  color: #666;
}
</style>